<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { version } from '../package.json'
import { ll } from './utils'
import Bus from './bus'
import Peach from '@wattjs/peach'
import WattTool from '@wattjs/tool'
import { loginByDevice, logout } from './api/user.model'

import DialogLogin from './components/dialog/login.vue'
import IconTools from './components/common/iconTools.vue'
import Main from './components/common/main.vue'

import Home from './components/home.vue'
import Uploader from './components/uploader.vue'
import Setting from './components/setting.vue'
import Analyse from './components/analyse.vue'

const inUtools = ref(false)
const isLogin = ref(false)
const isEdit = ref(false)
const level = ref(0)
const levelTxt = ref('')
const show = ref(false) // 显示登录弹窗
const name = ref('')
const navs = ref([])
const type = ref('home')
const locale = ref(zhCN)

navs.value = [
  { key: 1, label: '首页', value: 'home' },
  { key: 2, label: '上传', value: 'upload' },
  { key: 3, label: '商店', value: 'shop' },
  { key: 4, label: '设置', value: 'setting' },
  { key: 5, label: '统计', value: 'analyse' }
]
onMounted(() => {
  inUtools.value = !!window.utools
  Bus.on('logout', init)
})
onUnmounted(() => {
  Bus.off('logout', init)
})

const goHead = () => {
  const url = 'https://cdn.pjpiao.com'
  if (window.utools) {
    utools.shellOpenExternal(url)
  } else {
    window.open(url, '_blank')
  }
}
const goFeedbook = () => {
  const url = 'https://support.qq.com/product/455127'
  if (window.utools) {
    utools.shellOpenExternal(url)
  } else {
    window.open(url, '_blank')
  }
}
const goTo = (t) => {
  type.value = t
}
const handleLogout = () => {
  logout.send().then(() => {
    ll.remove('op_id')
    ll.remove('op_name')
    ll.remove('token')
    init()
  })
}

const init = () => {
  const uid = ll.get('op_id')
  const nickname = ll.get('op_name')
  isLogin.value = !!uid
  name.value = nickname
}

if (!isLogin.value) {
  // 根据设备id静默登录 | utools 登录态静默登录（前提绑定了）
  loginByDevice.send().then((res) => {
    if (res) {
      const { uid, token, nickname, tokenExpired } = res
      ll.set('op_id', uid, { expires: new Date(tokenExpired) })
      ll.set('op_name', nickname, { expires: new Date(tokenExpired) })
      ll.set('token', token, { expires: new Date(tokenExpired) })
      init()
    }
  })
}

watch(show, (val) => {
  if (!val) init()
}, {
  immediate: true
})

watch(level, (val) => {
  switch (val) {
    case 0:
      levelTxt.value = 'Hello'
      break
    case 1:
      levelTxt.value = '会员：' // member
      break
    case 2:
      levelTxt.value = 'VIP：' // vip
      break
    default:
      levelTxt.value = 'Hello'
      break
  }
}, {
  immediate: true
})

if (process.env.NODE_ENV === 'production') {
  watch(type, (val) => {
    const host = window.location.origin
    const path = `${host}/${val}`
    Peach.getInstance().logPage({ name: WattTool.String.hashString(path), path })
  }, {
    immediate: true
  })
}

</script>

<template>
  <div class="container flex direction">
    <a-config-provider :locale="locale" :auto-insert-space-in-button="false">
      <nav class="block">
        <div class="main inner flex">
          <div class="flex">
            <div @click="type = 'home'">
              <img src="upload.svg" class="inblock" width="20" />
              <a href=""><span class="inner">CDN静态资源</span></a>
            </div>
            <div class="menu ml-20">
              <a
                href="javascript:;"
                class="box"
                :class="{'active': type === nav.value}"
                v-for="nav of navs"
                :key="nav.key"
                @click.stop="type = nav.value"
              >
                <span>{{nav.label}}</span>
              </a>
            </div>
          </div>
          <div class="profile">
            <li>
              <a
                href="javascript:;"
                class="mr-8 hover"
                @click.prevent.stop="goFeedbook"
              >反馈 <c-icon icon="ExportOutlined" class="tip"></c-icon></a>
            </li>
            <li v-if="inUtools">
              <a
                href="javascript:;"
                class="mr-8 hover"
                @click.prevent.stop="goHead"
              >官网 <c-icon icon="ExportOutlined" class="tip"></c-icon></a>
            </li>

              <ul class="manage">
                <li v-if="!isLogin"><a href="javascript:;" class="hover" @click.prevent.stop="show = true"><span>登录</span></a></li>
                <li v-else class="active">
                  <a-dropdown>
                    <span>{{levelTxt}} {{name}}!<c-icon icon="DownOutlined" class="manage-icon"></c-icon></span>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a href="javascript:;" @click.prevent.stop="type = 'setting'">个人资料</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" @click.prevent.stop="handleLogout">退出登录</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </li>
                <li class="home-menu">
                  <a-dropdown>
                    <c-icon icon="UnorderedListOutlined" class="home-menu-icon"></c-icon>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item
                          :class="{'active': type === nav.value}"
                          v-for="nav of navs"
                          :key="nav.key"
                          @click.stop="type = nav.value"
                        ><span>{{nav.label}}</span></a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </li>
              </ul>

          </div>
        </div>
      </nav>

      <section class="body">
        <!-- 首页 -->
        <Main v-if="type === 'home'" :keep-out="!isLogin" @login="show = true">
          <template #empty>
            <div class="body">
              <p>这是一个工具，您可以上传备份照片、资料，但我不建议您这样来使用。</p>
              <p>我希望您把你工作中使用到的图片，文件上传到云上，在您的使用时可以直接使用我提供给的链接，这样可以加快文件的加载，并且减少你工作的繁琐的操作，或是因为引用的文件而使得它很大很大...</p>

              <p>因为这是云上的服务，它消耗一些资源，为了更好地提供服务，免费类会员只是用来体验功能的，我会在30天内移除您的文件，给您带来的不便敬请体谅。如果您觉得这个工具很好使用，请您购买会员服务，我们团队将为您提供更优质的服务。</p>

              <p>为了不违反法律法规，请您自觉遵守互联网法律法规，禁止一切<span style="color:red">黄、赌、毒、政治、迷信、违法</span>等相关的资料的上传，同时平台也会自动验证，如一经发现将移交网络公安机关部门。</p>
            </div>
          </template>
          <Home :edit="isEdit"></Home>
        </Main>
        <!-- 上传 -->
        <Main v-else-if="type === 'upload'" :keep-out="!isLogin" @login="show = true">
          <Uploader></Uploader>
        </Main>
        <div v-else-if="type === 'shop'">商店</div>
        <!-- 设置 -->
        <Main v-else-if="type === 'setting'" :keep-out="!isLogin" @login="show = true">
          <Setting @logout="handleLogout"></Setting>
        </Main>
        <Main v-else-if="type === 'analyse'" :keep-out="!isLogin" @login="show = true">
          <Analyse></Analyse>
        </Main>
      </section>

      <!-- 底部 -->
      <div class="footer">
        <p class="copyright">V{{ version }} ©2024 PJPIAO.COM 版权所有 | 湘ICP备18008873号-2 </p>
      </div>
      <!-- icon-tool -->
      <icon-tools :type="type" :edit="isEdit" :keep-out="!isLogin" @back="goTo" @edit="isEdit = !isEdit"></icon-tools>
      <dialog-login v-model:visible="show"></dialog-login>
    </a-config-provider>
  </div>

</template>
<style lang="less">
.menu {
  display: inline;
}
.profile {
  color: #fff;
  display: flex;
  .manage {
    padding: 0 5px;
    display: flex;
    align-items: center;
    .active {
      color: #1890ff;
    }
    &-icon {
      color: #f8f8f8;
      font-size: 12px;
      padding: 0 4px;
    }
    .home-menu {
      display: none;
      &-icon {
        font-size: 18px;
        margin-left: 10px;
      }
    }
  }
}
@media screen and (max-width: 735px) {
  .menu {
    display: none;
  }
  .profile .manage .home-menu {
    display: inline-block;
  }
}
</style>
